import { getPreviewUrl } from '@utils/WeStudyUtil';
import { Card, Image } from 'antd';
import { FC } from 'react';

const TraninProblemProblem: FC<any> = ({trainItem}) => {


  var knowledge = trainItem;
  var problemImg = getPreviewUrl() + knowledge.problemImg;
  var explainImg = getPreviewUrl() + knowledge.explainImg;

  return (
    <>
      {/* <Card
        title={problem.title}
        hoverable
        cover={
          <img
            height={360}
            style={{ objectFit: "contain" }}
            src={problemImg}
          />
        }
      ></Card> */}
      {/* <Card
        title={problem.title}
        hoverable
        cover={
          <Image width={648} height={360} style={{ objectFit: "contain" }} src={problemImg}/>
        }
      ></Card> */}
      <Card
        title={trainItem.title}
        hoverable
        cover={
          <Image.PreviewGroup
            items={
              problemImg === explainImg
                ? [problemImg]
                : [problemImg, explainImg]
            }
          >
            <Image
              width={648}
              height={360}
              style={{ objectFit: "contain" }}
              src={problemImg}
            />
          </Image.PreviewGroup>
        }
      ></Card>
    </>
  );
}

export default TraninProblemProblem;